<template>
  <div class="add-task-container">
    <h1>添加新任务</h1>
    <form @submit.prevent="addTask">
      <label>标题：</label>
      <input 
        v-model="taskForm.title" 
        type="text" 
        placeholder="请输入任务标题" 
        required
      />
      /*必选的*/
      <label>描述：</label>
      <textarea 
        v-model="taskForm.desc" 
        placeholder="请输入任务描述" 
      ></textarea>
      <label>优先级：</label>
      <select v-model="taskForm.priority">
        <option value="low">低</option>
        <option value="medium">中</option>
        <option value="high">高</option>
      </select>
      <label>截止日期：</label>
      <input 
        v-model="taskForm.deadline" 
        type="date" 
        required 
      />
      <button type="submit">提交任务</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useTaskStore } from '@/store/taskStore';
import { useRouter } from 'vue-router';

const taskStore = useTaskStore();
const router = useRouter();

const taskForm = reactive({
  title: '',
  desc: '',
  priority: 'medium' as 'low' | 'medium' | 'high',
  deadline: new Date().toISOString().split('T')[0],
});

const addTask = () => {
  taskStore.addTask({
    ...taskForm,
    id: Date.now(),
    isDone: false,
  });
  router.push('/'); // 提交后跳回任务列表页（首页）
};
</script>

<style scoped>
.add-task-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
label {
  font-weight: 500;
}
input, textarea, select {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
button {
  width: 120px;
  padding: 10px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>